<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form">
            <div class="layui-form-item" style="padding-top: 10px;">
                <div class="layui-input-group">
                    <div class="layui-input-prefix">用户名</div>
                    <input type="text" lay-affix="clear" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                    <div class="layui-input-prefix">邮箱</div>
                    <input type="text" lay-affix="clear" name="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                    <div class="layui-input-suffix">
                        <button type="button" class="layui-btn" lay-submit lay-filter="user-query">
                            <i class="layui-icon layui-icon-search"></i>查询
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">
                            <i class="layui-icon layui-icon-refresh"></i>重置
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="layui-bg-gray" style="padding: 16px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-body">
                    <button type="button" class="layui-btn layui-btn-disabled layui-btn-fluid">组织架构</button>
                    <hr class="layui-border-green">
                    <div style="overflow: auto;">
                        <ul id="dept-tree" class="dept-tree" data-id="0"></ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md10">
            <div class="layui-card">
                <div class="layui-card-body">
                    <table class="layui-hide" id="user-table"></table>
                </div>
            </div>
        </div>
    </div>
</div>
{# 表格操作 #}
<script type="text/html" id="toolbar">
    {% if power.user_add %}
    <button class="layui-btn layui-btn-sm" lay-event="toolbar-add">
        <i class="pear-icon pear-icon-add"></i>
        新增
    </button>
    {% endif %}
    {% if power.user_del %}
    <button class="layui-btn layui-btn-sm" lay-event="toolbar-remove">
        <i class="pear-icon pear-icon-ashbin"></i>
        删除
    </button>
    {% endif %}
</script>
{# 用户修改操作 #}
<script type="text/html" id="tool">
    <div class="layui-btn-group">
        {% if power.user_edit %}
        <button class="layui-btn layui-btn-sm" lay-event="tool-edit">
            <i class="layui-icon layui-icon-edit"></i>
        </button>
        {% endif %}
        {% if power.user_del %}
        <button class="layui-btn layui-btn-sm" lay-event="tool-remove">
            <i class="layui-icon layui-icon-delete"></i>
        </button>
        {% endif %}
    </div>
</script>
<script>
layui.use(['table','tree', 'form', 'jquery'], function(){
    const table = layui.table;
    const form = layui.form;
    const $ = layui.jquery;
    const dtree = layui.tree;

    const user_columns = () => [[
        {type: 'checkbox', fixed: 'left'},
        {field: 'id', title: 'ID', width: 80, sort: true},
        {field: 'username', title: '用户', width: 80},
        {field: 'email', title: '邮箱',align: 'center'},
        {field: 'dept_name', title: '所在部门', align: 'center'},
        {field: 'is_active', title: '是否启用',align: 'center'},
        {field: 'is_superuser', title: '超级管理员', align: 'center'},
        {field: 'last_login', title: '最后登录时间',align: 'center'},
        {field: 'date_joined', title: '创建时间',align: 'center'},
        {title: '操作', toolbar: '#tool', align: 'center', width: 130},
    ]];

    // 已知数据渲染
    table.render({
        elem: '#user-table',
        cols: user_columns(),
        parseData: parserTableData,
        url:'/api/users',
        skin: 'line', // 表格风格
        even: true,
        page: true, // 是否显示分页
        height: 'full-248',
        limit:20,
        limits:[20,40,60,80,100],
        text: {none: '暂无数据'},
        toolbar: '#toolbar', /*工具栏*/
        defaultToolbar: ['filter', 'print', 'exports'], /*默认工具栏*/
    });

    // user查询
    form.on('submit(user-query)', function(data) {
        table.reload('user-table', {where: data.field});
        return false;
    });

    // 获取公司部门树
    $.get(
        '/api/dept',
        function (res) {
            // 渲染公司部门树
            dtree.render({
            elem: '#dept-tree',
            data: res.result,
            onlyIconControl: true,
            customName:{
                title: 'name',
                id: 'id',
                children: 'children',
                spread:'spread',
            },
            click: function(obj) {
                table.reload('user-table', {where: {'deptId': obj.data.id}});
            }
            });
        }
    );
});
</script>
</body>
</html>